import React, { Suspense, lazy, useState, useEffect } from 'react';

import Loading from '../components/Loading/Loading';
const CanvasGuard = lazy(
    () => import(/* webpackChunkName: "canvasGuard" */ '../components/CanvasGuard.jsx')
);
const Home = lazy(() => import(/* webpackChunkName: "home" */ '../pages/home/home.jsx'));

const CanvasTest = lazy(
    () => import(/* webpackChunkName: "canvas" */ '../pages/canvas/testCanvas.jsx')
);
const Canvas = lazy(() =>
    import(/* webpackChunkName: "canvas" */ '../pages/canvas/canvas.jsx').then((module) => ({
        default: module.Canvas
    }))
);
// const Canvas = lazy(() => import(/* webpackChunkName: "canvas" */ '../pages/canvas/test.jsx').then(module => ({ default: module.Canvas })));
const NotFound = lazy(
    () => import(/* webpackChunkName: "notFound" */ '../pages/notFound/NotFound.jsx')
);

export const useRouteLoading = () => {
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        const handleStart = () => setLoading(true);
        const handleComplete = () => setLoading(false);

        

        return () => {
            // 清理事件监听
        };
    }, []);

    return loading;
};

const routes = [
    {
        path: '/',
        element: (
            <Suspense fallback={<Loading />}>
                <Home />
            </Suspense>
        )
    },
    {
        path: '/canvas/:id',
        element: (
            <Suspense fallback={<Loading />}>
                <CanvasGuard>
                    <Canvas />
                </CanvasGuard>
            </Suspense>
        )
    },
    {
        path: '*',
        element: (
            <Suspense fallback={<Loading />}>
                <NotFound />
            </Suspense>
        )
    },
    {
        path: '/testCanvas',
        element: (
            <Suspense fallback={<Loading />}>
                <CanvasTest />
            </Suspense>
        )
    }
];

export default routes;
